<template>
    <div :class="{'nav':true,'indexPage':!IsLogin}">
      <div class="navWrap">
        <ul>
          <!-- <li class="menu-logo" @click="logout"> -->
            <!-- <span class="menu-icon"><img style="margin-top:15px;" src='../assets/images/images/logo.png'/></span>
            <span class="menu-text">{{$t("message.Nav_log")}}</span> -->
            <!-- <a href="http://mainnet.dreamworld.io/#" > -->
              <!-- <img src="../assets/img/logo.png" alt=""> -->
            <!-- </a> -->
            <!-- <a href="http://mainnet.dreamworld.io/" v-else>
              <img src="../assets/img/logo.png" alt="">
            </a> -->
          <!-- </li> -->
          <li class="menu-logo" @click="toIndex()" v-if="IsLogin">
              <img src="../assets/img/logo.png" alt="">
          </li>
          <li class="menu-logo" v-else>
              <img src="../assets/img/logo.png" alt="">
          </li>

          <li class="menu-account" v-if="IsLogin" @click="toIndex()">
            <!-- <span class="menu-icon"><img style="margin-top: 31px;" src='../assets/images/images/account.png'/></span>
            <span class="menu-text">我的账户</span> -->
            <span><i class="fa fa-home"></i> 我的账户</span>
          </li>
          <li class="menu-asch">
            <a href="http://www.dreamworld.io/" target="blank">
              <!-- <span class="menu-icon"><img style="margin-top: 33px;" src='../assets/images/images/asch.png'/></span> -->
              <span class="menu-text"><i class="ddcNet"></i> DDC官网</span>
            </a>
            
          </li>
          <li class="menu-github">
            <a href="https://github.com/DreamworldDapp/DDC-Wallet-Front" title="github of DDC-Wallent-Front" target="blank" >
              <!-- <span class="menu-icon"><img style="margin-top: 30px;" src='../assets/images/images/github.png'/></span> -->
              <span class="menu-text"><i class="fa fa-github"></i> GitHub</span>
            </a>
          </li>
          <li class="menu-languge menu-right" style="margin-left:0;" v-if="IsLogin" @click="logout()" >
            <!-- <span class="menu-icon"><img style="margin-top: 30px;" src='../assets/images/images/退出.png'/></span> -->
            <span class="menu-text"><i class="fa fa-sign-out"></i> {{$t("message.NavLogOut")}}</span>
          </li>

          <el-popover placement="bottom" class="pop"
                      width="220"
                      trigger="hover">

            <!-- <el-table :data="gridData">
              <el-table-column width="150" property="date" label="日期"></el-table-column>
              <el-table-column width="100" property="name" label="姓名"></el-table-column>
              <el-table-column width="300" property="address" label="地址"></el-table-column>
            </el-table> -->
            <div class="pop-body"><img src="../assets/img/ddc_app.png" alt="">
            </div>
            
            <li slot="reference" class="menu-languge menu-right" style="margin-left:60px;">
              <a target="_blank" href="http://newappaz.oss-cn-hongkong.aliyuncs.com/app-ddc-release.apk" class="menu-text"><i class="el-icon-download"></i> 安卓移动钱包下载 </a>
            </li>
          </el-popover>
          <!-- <li class="menu-login menu-right">
            <span class="menu-icon"><img style="margin-top: 30px;" src='../assets/images/images/语言.png'/></span>
            <span class="menu-text">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{LanguageM}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">中文</el-dropdown-item>
                  <el-dropdown-item command="b">English</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </li> -->
        </ul>
      </div>
    </div>
</template>
<script>
import Config from "../config/server";
export default {
  name: "NavBar",
  data() {
    return {
      activeIndex: "2",
      activeIndex2: "",
      Languge: "CN",
      Link: Config.baseUrl,
      LanguageM:"中文"
    };
  },
  methods: {
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    logout() {
      // console.log("logout");
      this.$store.dispatch("logout");
    },
    toIndex(){
      this.$router.replace("/person")
    },
    // goLogin(){
    //   this.$router.replace("/person")
    // },
    handleCommand(command){
      if(command=="a"){
        this.$i18n.locale = 'CN';
        this.LanguageM="中文"
      }else{
         this.$i18n.locale = 'EN';
         this.LanguageM="English"
      }
    },
  },
  mounted() {
    var path = this.$route.path.toLocaleLowerCase();
    if (!path || path == "/") {
      this.activeIndex2 = "3";
      return false;
    }
    if (path.indexOf("person") >= 0) {
      this.activeIndex2 = "6";
      return false;
    }
    if (path.indexOf("kongtou") >= 0) {
      this.activeIndex2 = "5";
      return false;
    }
  },
  watch: {
    Languge(value) {
      console.log(value);
      this.$i18n.locale = value;
    },

    $route(value) {
      var path = value.path.toLocaleLowerCase();
      console.log(path);
      if (path == "\\") {
        this.activeIndex2 = "3";
        return false;
      }
      if (path.indexOf("person") >= 0) {
        this.activeIndex2 = "6";
        return false;
      }
      if (path.indexOf("kongtou") >= 0) {
        this.activeIndex2 = "5";
        return false;
      }
    }
  },
  computed: {
    IsLogin() {
      var user = this.$store.state.user;
      if (user) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>
<style>
.nav{
  overflow: hidden;
  background: rgb(255,255,255);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1000;
}
.indexPage{
  background: transparent !important;
}
.navWrap{
  max-width: 1180px; 
  margin:0 auto;
}
.navWrap ul{
  height: 100%;
  list-style: none;
}
.navWrap>ul>li{
  height: 70px;
  width: 150px;
  color: #656565;
  float: left;
  cursor: pointer;
  /* transition: all .5s ease-in-out; */
  text-align: right;
  font-size: 18px;
  font-weight: 600;
}
.navWrap>ul>li:first-child{
  width: 190px;
  margin-right: 60px;
}
.navWrap>ul>li>a{
  display: block;
  height: 70px;
  line-height: 70px;
}
.navWrap>ul>li:hover span{
  color:#1ab8e8;
}
.navWrap>ul>li span{
  line-height: 70px;
}
.navWrap .menu-account span i{
  font-size: 22px;position: relative;top: 2px;
}
.navWrap .menu-github span i{
  font-size: 22px;position: relative;top: 1px;
}
.navWrap .menu-right span i{
  font-size: 22px;position: relative;top: 2px;
}

.navWrap .menu-logo a img{
  vertical-align: middle;
}
.navWrap .menu-logo>img{
  margin-top: 9px;
}
.navWrap .menu-right{
  float: right;
}
.navWrap .menu-languge{
  margin-left:60px;
}
.navWrap .menu-login{
  margin-left: 30px;
}
.menu-asch .menu-text,
.menu-github .menu-text{
  color: #949bc7;
}
.navWrap .menu-logo .menu-icon{
  position: relative;
}

.ddcNet{
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../assets/img/ddc.png') no-repeat left center;
  /* background-size: 40px 20px; */
  position: relative;
  top: 3px;
}
.menu-asch:hover .ddcNet{
  background-position: -25px center;
}

.nav .pop{
  float: right;
  height: 70px;
  cursor: pointer;
}
.nav .pop li{
  height: 100%;
  line-height: 70px;
} 
.nav .pop a{
  color: #656565;
  outline: none;
}
.nav .pop-body{
  text-align: center;
  /* width: 220px;height: 220px; */
}

@media screen and (max-width:768px ){

    .menu-logo,
    .menu-account,
    .menu-login,
    .menu-github,
    .menu-languge,
    .menu-asch{
      margin-left: 10px !important;
      display: block;
      width: 100%;
      min-width: 300px;
    }
    .menu-right{
      float: left !important;
    }
    .nav-menu{
      overflow: hidden;
    }
    .navWrap{
      /* height: 80px; */
    max-width: 768px; 
    }
}
</style>
